<template>
  <div class="home" @click="tan">
    <!-- 轮播图 -->
    <mt-swipe
      class="swipe"
      :style="{ height: h }"
      :speed="500"
      :showIndicators="true"
    >
      <mt-swipe-item>
        <img src="../assets/home/01.png" alt="" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/home/02.png" alt="" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/home/03.png" alt="" />
      </mt-swipe-item>
    </mt-swipe>

    <!-- 下单、外卖 -->
    <div class="home-sale">
      <div class="home-sale-border">
        <div class="row home-sale-order">
          <div class="col-6">
            <router-link to="/productList" href="">
              <img src="../assets/home/下单.png" alt="" />
              <h4>门店自取</h4>
              <p>下单免排队</p>
            </router-link>
          </div>
          <div class="col-6">
            <router-link to="/addressedit">
              <img src="../assets/home/外卖.png" alt="" />
              <h4>外卖</h4>
              <p>无接触配送</p>
            </router-link>
          </div>
        </div>
        <div class="row home-sale-pin">
          <div class="col-6">
            <router-link to="" class="home-cell-pin">
              <img src="../assets/home/粥.png" alt="" class="pinpic" />
              <span>好友拼单</span>
            </router-link>
          </div>
          <div class="col-6">
            <p>拼单喝粥，分账更方便</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 三个方块 -->
    <div class="home-fk d-flex justify-content-center mb-2" disabled>
      <router-link to="/productList" class="home-fk-zt">
        <div class="home-fk-one">
          <h6></h6>
          <h6>粥铺百货</h6>
        </div>
      </router-link>
      <router-link to="/points" class="home-fk-zt">
        <div class="home-fk-two">
          <h6>粥铺签到</h6>
        </div>
      </router-link>
      <router-link to="/giftcard" class="home-fk-zt">
        <div class="home-fk-three">
          <h6>粥铺礼包</h6>
        </div>
      </router-link>
    </div>

    <!-- 点什么 -->
    <div class="home-think d-flex justify-content-center">
      <img src="../assets/home/chairs.png" alt="" class="think-four">
      <div class="think-one"></div>
      <div class="think-two"></div>
      <img src="../assets/home/menu.png" alt="" class="think-three" />
    </div>
  </div>
</template>

<script>
// 引入state函数
import { mapState } from "vuex";
import { MessageBox } from "mint-ui";

export default {
  data() {
    return {
      selected: "home",
      h: "211px",
    };
  },
  methods: {
    // 初始化轮播图
    initSwipe() {
      let picWidth = 1100; //图片宽度
      let picHeight = 620; //图片高度
      let screenWidth = window.screen.width; //屏幕的宽度
      let swipeHeight = Math.floor((picHeight * screenWidth) / picWidth) + "px"; //（图片的高*屏幕的宽）除以图片的宽，向下取整
      this.h = swipeHeight;
    },
    // 是否登录弹框
    tan() {
      if (this.isLogin == null) {
        MessageBox.alert("请先登录").then(() => {
          this.$router.push("/login");
        });
      }
    },
  },
  // 结构变量
  computed: {
    ...mapState(["isLogin", "userId", "addressTitle", "addressInfoNow"]), //是否登录
  },
  watch: {
    //监听 selected 值，当 selected 变化时，跳转到相应的界面
    selected(newval) {
      if (newval == "productList") {
        this.$router.push("/productList");
      } else if (newval == "order") {
        this.$router.push("/order");
      } else if (newval == "my") {
        this.$router.push("/my");
      }
    },
  },
  created() {},
  //页面挂载完成后，根据屏幕的宽度，计算图片的高度
  mounted() {
    this.initSwipe();
    // 测试地址的对象
    console.log(typeof this.addressInfoNow);
    console.log(this.addressInfoNow);
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: black;
}
//媒体查询：点单和方块之间的间距，方块与积分之间的间距
//iphone 5/SE
@media screen and (min-height: 568px) {
  .home-sale {
    // margin-bottom: 3vh;
  }
}

//iphone 6/7/8
@media screen and (min-height: 667px) {
  .home-sale {
    // margin-bottom: 4vh;
  }
  .home-fk {
    // margin-bottom: 2vh;
  }
}

//iphone 6/7/8 Plus
@media screen and (min-height: 736px) {
  .home-sale {
    // margin-bottom: 5vh;
  }
  .home-fk {
    // margin-bottom: 3vh;
  }
}

//iphone X
@media screen and (min-height: 812px) {
  .home-sale {
    // margin-bottom: 8vh;
  }
  .home-fk {
    // margin-bottom: 6vh;
  }
}

.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;

  .swipe img {
    width: 100%;
  }

  .home-sale {
    margin-bottom: 15px; //做媒体查询
    .home-sale-border {
      width: 90%;
      background-color: #fff;
      float: left;
      margin-left: 5%;
      margin-top: -3%;
      position: relative;
      border-radius: 10px;
      border: 1px solid #ff8c00;
      .home-sale-order,
      .home-sale-pin {
        text-align: center;
        & a {
          img {
            width: 10vh;
          }
          h4 {
            font-size: 1.5rem;
            margin-bottom: 1vh;
          }
          p {
            font-size: 0.5rem;
            margin-bottom: 1vh;
          }
        }
      }
      .home-sale-pin {
        & a img {
          width: 5vh;
          vertical-align: middle;
        }
        & > :nth-child(2) {
          p {
            margin-top: 1vh;
            font-size: 0.5rem;
          }
        }
      }
    }
  }

  .home-fk {
    div {
      background-repeat: no-repeat;
      width: 15vh;
      height: 15vh;
      border-radius: 10px;
      padding-top: 1px;
      padding-left: 1px;
      border: 1px solid #ff8c00;
      h6 {
        font-size: 0.9rem;
      }
    }
    .home-fk-one {
      background-color: #fff;
      background-image: url(../assets/home/zhou.png);
      background-size: 13vh 13vh;
      background-position: 110% 138%;
      transform: rotate(-24deg);
    }
    .home-fk-two {
      background-color: #fff;
      background-image: url(../assets/home/qiandao.png);
      transform: rotate(15deg);
    }
    .home-fk-three {
      background-color: #fff;
      background-image: url(../assets/home/dalibao.png);
      transform: rotate(39deg);
    }
    .home-fk-two,
    .home-fk-three {
      background-size: 8vh 8vh;
      background-position: 94% 92%;
    }
  }

  .home-think {
    .think-four{
      width: 12vh;
      height: 12vh;
      position: relative;
      top:2vh;
      left:8vh
    }
    .think-one {
      position: relative;
      left: 15%;
      width: 20vh;
      background-repeat: no-repeat;
      background-image: url(../assets/home/ren.png);
      background-size: 10vh 10vh;
      background-position: 30% 80%;
    }
    .think-two {
      background-image: url(../assets/home/think.png);
      position: relative;
      left: 3%;
      width: 20vh;
      height: 20vh;
      background-repeat: no-repeat;
      background-size: 10vh 10vh;
    }
    .think-three{
      width: 5vh;
      height: 5vh;
      position: relative;
      top: 60%;
      left: -30%;
      transform: rotate(12deg);
    }
  }

  // 底部导航
  .select {
    color: black;
    font-size: 12px;
  }
  .noselect {
    color: #aaaaaa;
    font-size: 12px;
  }
}
</style>